<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">
            <input type="hidden" name="id"  value="${(collection.id)!}"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">书名</label>
                <div class="layui-input-block">
                    <input type="text" name="bookName" lay-verify="required" lay-reqtext="书名不能为空" placeholder="请输入书名"  value="${(collection.bookName)!}" class="layui-input">
                    <tip>填写书籍名称</tip>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">图书数量</label>
                <div class="layui-input-block">
                    <input type="number" name="bookCount" placeholder="请输入图书数量"  value="${(collection.bookCount)!}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label required">书籍类型</label>
                <div class="layui-input-block">
                    <input type="text" name="bookType" lay-verify="required" lay-reqtext="类型不能为空" placeholder="请输入书本类型"  value="${(collection.bookType)!}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label required">图书存放区域</label>
                <div class="layui-input-block">
                    <input type="text" name="depositArea"  placeholder="请输入图书存放区域"  value="${(collection.depositArea)!}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label required">图书存放位置</label>
                <div class="layui-input-block">
                    <input type="text" name="location" placeholder="请输入图书存放位置"  value="${(collection.location)!}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                    <button class="layui-btn layui-btn-lg layui-btn-normal" id="closeBtn">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/lib/layui/layui.js" charset="utf-8"></script>
<script>
    const ctx = "${ctx}";
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery;


        //监听提交
        form.on('submit(saveBtn)',function(data){
            // 提交数据时的加载层 （https://layer.layui.com/）
           console.log(data.field);
            //得到所有的表单元素的值
            // 请求地址
            let url = ctx + "/bookcase/add";
            //判断计划项ID是否为空（如果不为空，则表示更新）
            const id = $("[name='id']").val();
            console.log("id:" + id);
            if(id != null && id !== ''){
                url = ctx + "/bookcase/update";
            }
            $.post(url, data.field, function (result) {
                // 判断操作是否执行成功 200=成功
                if (result.code === 200) {
                    // 成功
                    // 提示成功
                    top.layer.msg("操作成功！", {icon: 6});
                    // 关闭弹出层
                    layer.closeAll("iframe");
                    // 刷新父窗口，重新加载数据
                    parent.location.reload();
                } else {
                    // 失败
                    layer.msg(result.msg, {icon: 5});
                }
            });

            return false;
        });
        /**
         * 关闭弹出层
         */
        $("#closeBtn").click(function () {
            // 先得到当前iframe层的索引
            var index = parent.layer.getFrameIndex(window.name);
            // 再执⾏关闭
            parent.layer.close(index);
        });

    });
</script>
</body>
</html>